<template>
  <div>
    <ul class="typeList f-cb">
      <li
        v-for="item in typeList"
        :key="item.id"
        @click="TypeChange(item.id)"
        :class="submit.type == item.id ? 'hover' : ''"
      >
        {{ item.name }}
      </li>
    </ul>
    <div v-show="tableData.length == 0" class="zanwu">{{ $t("m.NoData") }}</div>
    <div class="anmesd AccountTableCenter on" v-show="!tableData.length == 0">
      <el-table
        @row-click="cellClicks"
        @row-contextmenu="contextmenu"
        :max-height="heightList"
        :data="tableData"
        style="width: 100%"
        class="tableAuto"
        v-loading="loading"
        ref="chatContent"
      >
        <el-table-column width="150px" :label="$t('quotation.left_list.56hzdc682d00')" fixed="left">
          <template slot-scope="scope">
            <div class="first_table">
              <h2>{{ scope.row.name }}</h2>
              <p class="f-cb">
                <img
                  class="type_icon"
                  :src="
                    scope.row.market == 'HKEX'
                      ? HKicon
                      : scope.row.market == 'US'
                      ? USicon
                      : scope.row.market == 'SSE'
                      ? SHicon
                      : SZicon
                  "
                  alt=""
                />{{ scope.row.symbol }}
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column min-width="120px" :label="$t('table.order.56hzq2y0q380')" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.priceType | priceTypeList(te) }}</div>
          </template>
        </el-table-column>
        <el-table-column min-width="100px" :label="$t('table.order.56hzq2y0qbo0')" align="center">
          <template slot-scope="scope">
            <div :class="scope.row.direction == 1 ? 'red' : 'green'">
              {{ scope.row.direction | jiaoyiType(1, te) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column :min-width="lang == 'en' ? '160px' : '100px'" :label="$t('table.order.56hzq2y0qhw0')" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.tradePrice }}</div>
          </template>
        </el-table-column>
        <el-table-column :min-width="lang == 'en' ? '160px' : '120px'" :label="$t('table.order.56hzq2y0qng0')" align="center">
          <template slot-scope="scope">
            <div> <span v-if="scope.row.tradeNum">{{ scope.row.tradeNum | formatNumberRgx}}</span> <span v-else>--</span></div>
          </template>
        </el-table-column>
        <!-- 成交数量 -->
        <el-table-column min-width="120px" :label="$t('table.order.56hzq2y0z6c0')" align="center">
          <template slot-scope="scope">
            <div> <span v-if="scope.row.dealNum">{{ scope.row.dealNum | formatNumberRgx}}</span> <span v-else>--</span></div>
          </template>
        </el-table-column>
        <!-- 待成交数量 -->
        <el-table-column min-width="120px" :label="$t('table.order.56hzq2y0zmg0')" align="center">
          <template slot-scope="scope">
            <!-- 已撤单时待成交数量显示为空，已成交其余显示空 -->
            <div v-if="submit.type == 1 && scope.row.restNum">
              {{ scope.row.restNum | formatNumberRgx}}
            </div>
            <div v-else>--</div>
          </template>
        </el-table-column>
        <el-table-column min-width="120px" :label="$t('table.order.56hzq2y105c0')" align="center">
          <template slot-scope="scope">
            <div>
              {{
                Number(scope.row.dealPrice) != 0 ? scope.row.dealPrice : "--"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column :min-width="lang == 'en' ? '160px' : '120px'" :label="$t('table.order.56hzq2y10b40')" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.expireType != 3">
              {{ scope.row.expireType | expireTypeList(te) }}
            </div>
            <div v-else>{{ scope.row.expireDate }}</div>
          </template>
        </el-table-column>
        <el-table-column :min-width="lang == 'en' ? '180px' : '160px'" :label="$t('table.order.56hzq2y10fc0')" align="center">
          <template slot-scope="scope">
            <div>
              {{
                scope.row.dealFee != 0
                  ? Number(scope.row.dealFee).toFixed(2)
                  : "--"
              }}
            </div>
          </template>
        </el-table-column>
        <!-- 委托时间 -->
        <el-table-column
          :label="$t('m.CommTime')"
          :min-width="lang == 'en' ? '160px' : '100px'"
          align="center"
        >
          <template slot-scope="scope">
            <div style="white-space: pre-line" v-if="scope.row.tradeTime == 0">
              --
            </div>
            <div style="white-space: pre-line" v-else>
              <!-- {{ scope.row.tradeTime | timestampToTime }} -->
              <p>{{ scope.row.tradeTime | datas }}</p>
              <p>{{ scope.row.tradeTime | time }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :label="submit.type == 1 ? $t('table.order.56hzq2y10sk0') : $t('table.order.56hzq2y10y00')"
          :min-width="lang == 'en' ? '160px' : '100px'"
          align="center"
        >
          <template slot-scope="scope">
            <div style="white-space: pre-line" v-if="scope.row.dealTime == 0">
              --
            </div>
            <div style="white-space: pre-line" v-else>
              <p>{{ scope.row.dealTime | datas }}</p>
              <p>{{ scope.row.dealTime | time }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.order.56hzq2y113w0')" min-width="100px" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.dealNum">
              {{
                Number(
                  scope.row.dealPrice * scope.row.dealNum +
                    Number(scope.row.dealFee)
                ).toFixed(2) | formatNumberRgx
              }}
            </div>
            <div v-else>--</div>
          </template>
        </el-table-column>
        <el-table-column :min-width="lang == 'en' ? '180px' : '120px'" align="center">
          <template slot="header">
            {{$t('table.order.56hzq2y11h40')}}
            <span
              class="FinancDescription"
              @click="FinancDescriptionClick"
            ></span>
          </template>
          <template slot-scope="scope" class="">
            <!-- 订单如果是撤单 开仓(tradeType==direction)显示--;-->
            <!-- <div v-if="submit.type==2&&scope.row.tradeType==scope.row.direction">--</div> -->
            <div>
              <el-tooltip
                class="item"
                effect="dark"
                placement="right-start"
                v-if="scope.row.isFinance == 1"
                popper-class="isFinance"
              >
                <div slot="content">
                   <span v-if="scope.row.dealAfterNum">{{$t('table.current_commission.56hzdwf0dqk0')}}{{Number(scope.row.dealAfterFinance).toFixed(2)| formatNumberRgx}}</span>
                   <span v-else>{{$t('table.current_commission.56hzkqf0dc40')}}</span>
                 </div>
                <span class="yesFinan">{{$t('table.order.56hzq2y11n40')}}</span>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                placement="right-start"
                v-if="scope.row.isMargin == 1"
                popper-class="isFinance"
              >
                 <div slot="content">
                   <span v-if="scope.row.dealAfterNum">{{$t('table.current_commission.56hzsfsweqk0')}}{{scope.row.dealAfterNum | formatNumberRgx}}</span>
                   <span v-else>{{$t('table.current_commission.56hzkqf0dcs0')}}</span>
                 </div>
                <span class="yesFinan">{{$t('table.order.56hzq2y11n40')}}</span>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('table.order.56hzq2y11rk0')"
                placement="right-start"
                v-if="scope.row.isMargin == 0 && scope.row.isFinance == 0"
                popper-class="isFinance"
              >
                <span class="yesFinan">{{$t('table.order.56hzq2y11vw0')}}</span>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column :min-width="lang == 'en' ? '140px' : '90px'" :label="$t('table.order.56hzq2y11yo0')" align="center">
          <template slot-scope="scope">
            <div>
              {{
                scope.row.market == "HKEX"
                  ? "HKD"
                  : scope.row.market == "US"
                  ? "USD"
                  : "CNH"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column min-width="90px" :label="$t('table.order.56hzq2y129w0')" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.status | DelegationStatus(te) }}</div>
          </template>
        </el-table-column>
        <el-table-column
          :min-width="lang == 'en' ? '240px' : '120px'"
          :label="$t('table.order.56hzq2y12cw0')"
          align="right"
          v-if="submit.type == 2"
        >
          <template slot-scope="scope">
            <p>{{ scope.row.isSys | orderStatus(te) }}</p>
            <p v-if="scope.row.reason" class="reason">
              {{ `${$t('table.order.56hzq2yewh00')} ${scope.row.reason}` }}
            </p>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import {get_trade_record} from '@/assets/js/API/order.js';
import dayjs from "dayjs";
export default {
  props: ["assetType"],
  data() {
    return {
      typeList: [
        { name: this.$t('table.order.56hzq2y12h00'), id: 1 },
        { name: this.$t('table.order.56hzq2y12jg0'), id: 2 },
      ],
      TypeActive: 1,
      heightList: null,
      tableData: [],
      submit: {
        type: 1,
        assetType: 2,
        page: 1,
      },
      loading: true,
      list: [],
      HKicon: require("@/assets/img/icon_hk.png"),
      USicon: require("@/assets/img/icon_us.png"),
      SHicon: require("@/assets/img/icon_sh.png"),
      SZicon: require("@/assets/img/icon_sz(1).png"),
      lang: "",
    };
  },
  filters: {
    datas(val) {
      return dayjs(val * 1000).format("YYYY-MM-DD");
    },
    time(val) {
      return dayjs(val * 1000).format("HH:mm:ss");
    },
  },
  mounted() {
    var _this = this;
    _this.$nextTick(function () {
      if (_this.tableData.length !== 0) {
        _this.heightList =
          $(window).height() - $(".tableAuto").offset().top - 46;
      }
      _this.submit.assetType = _this.assetType;
      _this.getrecord();
      var box = _this.$refs.chatContent.bodyWrapper;
      box.addEventListener("scroll", _this.paperScroll);
    });
    _this.lang = localStorage.getItem("lang");
  },
  methods: {
    FinancDescriptionClick() {
      this.$emit("DescriptionOpen");
    },
    paperScroll() {
      var _this = this;
      var box = this.$refs.chatContent.bodyWrapper;
      // 滚动距离
      this.scroll = box.scrollTop;
      // 变量windowHeight是可视区的高度
      this.windowHeight = box.clientHeight || box.clientHeight;
      // 变量scrollHeight是滚动条的总高度
      this.scrollHeight = box.scrollHeight || box.scrollHeight;
      if (
        this.scroll + this.windowHeight == this.scrollHeight &&
        JSON.stringify(_this.list) != "[]"
      ) {
        _this.getrecord();
        // 获取到的不是全部数据 当滚动到底部 继续获取新的数据
      }
      //console.log(this.scroll,this.windowHeight,this.scrollHeight,'scroll')
    },
    TypeChange(id) {
      this.submit.type = id;
      this.submit.page = 1;
      this.tableData = [];
      this.getrecord();
    },
    cellClicks(row) {
      this.$store.dispatch("SetStockData", {
        symbol: row.symbol,
        securityType: row.securityType,
        market: row.market,
      });
    },
    contextmenu(row, column, event) {
      //右点击事件
      console.log(row);
      console.log(column);
      console.log(event);
    },
    getrecord() {
      var _this = this;
        get_trade_record(_this.submit).then(function (res) {
          if (res.code == 1) {
            _this.submit.page++;
            _this.list = res.data.list;
            _this.tableData = [..._this.tableData, ...res.data.list];
            _this.loading = false;
          } else {
            _this.$message({
              message: response.data.msg,
              type: "warning",
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
  watch: {
    tableData(val, old) {
      this.$nextTick(function () {
        this.heightList =
          $(window).height() - $(".tableAuto").offset().top - 46;
      });
    },
    assetType(val, old) {
      if (val != old) {
        this.submit.assetType = val;
        this.submit.page = 1;
        this.tableData = [];
        this.getrecord();
      }
    },
  },
};
</script>
<style lang="less">
@import "~@/assets/less/table.less";
.typeList {
  width: 100%;
  li {
    font-size: 12px;
    color: @fbSix;
    line-height: 30px;
    float: left;
    margin: 0 20px;
    cursor: pointer;
  }
  li.hover,
  li:hover {
    color: @hoverColor;
  }
}
.cell p.reason {
  color: @fbSix !important;
  font-size: 10px !important;
}
.first_table {
  .type_icon {
    height: 13px;
    margin-right: 5px;
  }
}
</style>